.product-list {
  position: relative;
  padding: 35px 0 10px 0;
  min-height: 50vh;

  &.isLoading {
    opacity: 0;
    min-height: 0.5vh;
  }

  .product-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2%;
    min-height: 55vh;

    .product-list-item {
      width: 23.5%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;

      .product-list-item-image-link {
        position: relative;
        width: 100%;
      }

      .product-list-item-image-wrapper {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background: #ffffff;
        position: relative;

        .product-list-item-image {
          width: 100%;
          margin: 0 auto;
          object-fit: contain;
        }

        .product-list-item-free {
          background-color: #942ffb;
          color: #fff;
          text-transform: uppercase;
          text-align: center;
          font-size: 12px;
          font-weight: 600;
          line-height: 1.3;
          padding: 4px 6px;
          min-height: 18px;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
        }
      }

      .product-list-item-infos {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        align-self: stretch;

        .product-list-item-mysku {
          .product-list-item-button-add {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 4px 4px 4px 0;
            background: transparent;
            color: #942ffb;
            text-transform: none;
            font-size: 14px;
            font-weight: 500;

            .iconfont {
              font-size: 22px;
              margin-right: 5px;
            }
          }
        }

        .product-list-item-priceinfo {
          .product-list-item-price {
            color: #000000;
            font-size: 21px;
            font-weight: 600;
            line-height: 30px;
            min-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;

            .price-label {
              font-size: 12px;
              padding-right: 3px;
            }

            .price-discount {
              display: inline-block;
              font-size: 14px;
              font-weight: 500;
              line-height: 20px;
              padding: 2px 5px;
              color: #ffffff;
              background-color: #f24726;
              border-radius: 8px;
              margin-left: 8px;
              align-self: center;
            }
          }

          .product-list-item-row {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;
            min-height: 21px;
            gap: 8px;
          }

          .product-list-item-rrp {
            color: #333333;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;
            min-height: 21px;

            .price-label {
              font-weight: 400;
              color: #333333;
            }
          }

          .product-list-item-regular {
            color: #333333;
            font-size: 14px;
            font-weight: 500;
            line-height: 21px;
            min-height: 21px;

            .price-label {
              font-weight: 400;
              color: #333333;
            }
          }
        }

        .product-list-item-title {
          color: #535353;
          font-size: 13px;
          font-weight: 300;
          line-height: 20px;
          margin-top: 5px;
          height: 40px;

          a {
            color: #535353;
            font-size: 13px;
            font-weight: 400;
            text-decoration: none;
          }
        }

        .product-list-item-sku {
          color: #535353;
          font-size: 12px;
          font-weight: 400;
          line-height: 21px;
          word-break: break-all;
        }

        .product-list-item-actions {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding: 0;
          min-height: 30px;

          .product-list-item-stock {
            display: block;

            .iconfont {
              font-size: 20px;

              &.icon-check {
                color: #ff6666;
              }

              &.icon-clock-circle {
                color: #444444;
              }

              &.icon-stop {
                font-size: 13px;
                color: #ffffff;
                padding: 4px 3px 4px 4px;
                width: 20px;
                border-radius: 20px;
                background-color: #000000;
              }
            }
          }

          .product-list-item-compare {
            padding-left: 12px;
            margin-left: 12px;
            border-left: 1px solid #666666;
            line-height: 0;
            height: 20px;

            .product-list-item-button-compare {
              color: #666666;
              outline: none;
              border: none;
              background: transparent;
              font-size: 13px;
              line-height: 18px;
              padding: 1px 0;
              text-transform: none;

              &.in-compare-list {
                color: #b5b5b5b5;
              }
            }
          }
        }

        .product-list-item-tologin {
          color: #8f8f8f;
          font-size: 13px;
          line-height: 2;
          font-weight: 500;

          a {
            color: #8f8f8f;
            font-size: 13px;
            line-height: 1;
            font-weight: 500;
            text-decoration: none;
          }
        }
      }
    }
  }

  .product-list-pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    padding-bottom: 50px;
  }
}

// ================================================================================
// breakpoints: 1024 768 640 480 375 320
// ================================================================================
@media (max-width: 1366px) {
  .product-list {
    .product-list-wrapper {
      .product-list-item {
        .product-list-item-image-wrapper {
          .product-list-item-free {
            font-size: 10px;
          }
        }
      }
    }
  }
}
@media (max-width: 1200px) {
  .product-list {
    .product-list-wrapper {
      .product-list-item {
        .product-list-item-image-wrapper {
          .product-list-item-free {
            font-size: 9px;
            word-spacing: -1px;
          }
        }
      }
    }
  }
}
@media (max-width: 1080px) {
  .product-list {
    .product-list-wrapper {
      .product-list-item {
        .product-list-item-image-wrapper {
          .product-list-item-free {
            font-size: 8px;
          }
        }
      }
    }
  }
}
@media (max-width: 1023px) {
  .product-list {
    padding-top: 30px;
  }
}

@media (max-width: 768px) {
  .product-list {
    padding-top: 4vw;

    .product-list-wrapper {
      gap: 3%;

      .product-list-item {
        width: 31%;
      }
    }
  }
}

@media (max-width: 480px) {
  .product-list {
    .product-list-wrapper {
      gap: 3.5%;

      .product-list-item {
        width: 48%;
        .product-list-item-infos {
          .product-list-item-mysku {
            .product-list-item-button-add {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
